<template>
  <!-- 弹窗编辑sku -->
  <el-dialog title="sku列表" :visible.sync="dialogVisible" width="65%">
    <div class="dialog-footer">
      <el-row :gutter="0">
        <el-col :span="2" :offset="22">
          <el-button
            class="btn"
            style="margin-bottom: 20px"
            type="primary"
            size="default"
            @click="addSku"
            >新增</el-button
          >
        </el-col>
      </el-row>

      <!-- table表格 -->
      <el-table v-if="skuList.length > 0" :data="skuList" border stripe>
        <el-table-column type="index" label="序号" width="50" />
        <!-- sku图片 -->
        <el-table-column label="图片" :width="120">
          <template slot-scope="scope">
            <!-- 上传图片 -->
            <el-upload
              style="width: 100px; height: 100px"
              :action="uploadUrl"
              :headers="headers"
              :show-file-list="false"
              :on-success="
                (res) => {
                  handleAvatarSuccess(res, scope.row)
                }
              "
            >
              <img
                v-if="scope.row.pic"
                :src="scope.row.pic"
                style="width: 100px; height: 100px"
              />
              <i
                v-else
                style="width: 100px; height: 100px; margin-top: -31px"
                class="el-icon-plus avatar-uploader-icon"
              />
            </el-upload>
          </template>
        </el-table-column>

        <el-table-column label="颜色" :width="160" prop="color">
          <template slot-scope="scope">
            <el-input v-model="scope.row.spData[0].value" size="mini" />
          </template>
        </el-table-column>
        <el-table-column label="大小" :width="160">
          <template slot-scope="scope">
            <el-input v-model="scope.row.spData[1].value" size="mini" />
          </template>
        </el-table-column>

        <!-- 库存 -->
        <el-table-column label="库存" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.stock"
              placeholder="自定义库存"
              size="mini"
              clearable
            />
          </template>
        </el-table-column>
        <!-- 预警库存 -->
        <el-table-column label="预警库存" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.lowStock"
              placeholder="预警库存"
              size="mini"
              clearable
            />
          </template>
        </el-table-column>
        <!-- sku编码 -->
        <el-table-column label="sku编码" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.skuCode"
              placeholder="请输入sku编码"
              size="mini"
              clearable
            />
          </template>
        </el-table-column>
        <!-- 价格 -->
        <el-table-column label="价格" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.price"
              placeholder="请输入sku编码"
              size="mini"
              clearable
            />
          </template>
        </el-table-column>
        <!-- 销量 -->
        <el-table-column label="销量" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sale" size="mini" clearable />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.id">
              <!-- 根据tempId删除数组 -->
              <el-button
                type="text"
                style="color: red"
                size="mini"
                @click="del(scope.row)"
                >删除</el-button
              >
              <el-button size="mini" type="text" @click="editSku(scope.row)"
                >修改编辑
              </el-button>
            </span>
            <!-- 分两种情况 新的是保存 老的是提交 -->
            <span v-else>
              <el-button
                style="color: red"
                size="mini"
                type="text"
                @click="delNew(scope.row)"
                >删除
              </el-button>
              <el-button size="mini" type="text" @click="saveNewSku(scope.row)"
                >保存
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mixin from '@/mixins/index'
import productApi from '@/api/product/detail/index'
import skuApi from '@/api/product/sku/index'
import { v4 as uuid } from 'uuid'
export default {
  mixins: [mixin],

  data() {
    return {
      dialogVisible: false,
      pageLoading: false,
      skuList: [],
      id: ''
    }
  },
  created() {},
  methods: {
    //点击时过来的id
    openDetail(id) {
      this.dialogVisible = true
      this.id = id
      this.skuList = []
      this.getDetail()
    },
    //增加一条sku
    addSku() {
      const obj = {
        productId: this.id,
        lockStock: '',
        lowStock: '',
        stock: '',
        pic: '',
        price: '',
        sale: '',
        skuCode: '',
        spData: [
          { key: '颜色', value: '' },
          { key: '容量', value: '' }
        ],
        tempId: uuid()
      }
      this.skuList.push(obj)
    },
    //图
    handleAvatarSuccess(res, row) {
      if (res.success) {
        row.pic = res.data.fileUrl
      } else {
        this.$message('发生未知错误,上传图片失败')
      }
    },
    //删除老的
    del(row) {
      this.$confirm(`是否删除sku?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.pageLoading = true
          skuApi.deleteSku(row.id).then((res) => {
            if (res.success) {
              this.$message.success('删除sku成功')
              this.getDetail()
            } else {
              this.$message.error('删除sku失败')
            }
            this.pageLoading = false
          })
        })
        .catch((rej) => {
          console.log('取消')
        })
    },
    //删除新的
    delNew(row) {
      this.$confirm(`是否删除sku?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.skuList = this.skuList.filter(
            (item) => item.tempId != row.tempId
          )
        })
        .catch((rej) => {
          console.log('quxiao')
        })
    },
    //sku详情
    getDetail() {
      this.pageLoading = true
            this.skuList = []
      productApi
        .productSkusDetail(this.id)
        .then((res) => {
          console.log(res)

          res.data.skus.forEach((item) => {
            this.skuList.push({
              ...item,
              spData: JSON.parse(item.spData)
            })
          })
          this.pageLoading = false
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    //保存新增一条sku
    saveNewSku(row) {
      delete row.tempId
      this.pageLoading = true
      skuApi
        .addSkus({
          ...row,
          spData: JSON.stringify(row.spData)
        })
        .then((res) => {
          if (res.success) {
            this.getDetail()
            this.$message.success('新增成功')
          } else {
            this.$message.error('新增失败')
          }
        })
      this.pageLoading = false
    },
    // 编辑 sku
    editSku(row) {
      const obj = {
        id: row.id,
        lockStock: row.lockStock,
        lowStock: row.lowStock,
        stock: row.stock,
        pic: row.pic,
        price: row.price,
        productId: row.productId,
        sale: row.sale,
        skuCode: row.skuCode,
        spData: JSON.stringify(row.spData)
      }
      this.pageLoading = true
      skuApi.updateSkus(obj).then((res) => {
        if (res.success) {
          this.$message.success('修改sku成功')
        } else {
          this.$message.error('修改sku失败')
        }
        this.pageLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>